<template>
    <div class="index">
        <div class="topSearch">
            <van-search style="border-radius: 10px;" v-model="jobName" placeholder="请输入任务名称" @search="onSearch" />
        </div>
        <div class="addbtn">
            <van-button class="btn1"  icon="plus" type="primary" size="normal" @click="add">添加任务</van-button>
            <van-button class="btn2" icon="edit" type="primary" size="normal" @click="edit">修改任务</van-button>
            <van-button class="btn3" icon="delete-o" type="primary" size="normal" @click="del">删除任务</van-button>
        </div>
        <div class="title">
            <div class="celc">
                <van-checkbox v-model="checkedAll" shape="square" @click="checkAll"></van-checkbox>
            </div>
            <div class="col">任务名称</div>
            <div class="col">任务定时</div>
            <div class="col">任务状态</div>
            <div class="colo">展开</div>
        </div>

        <!--        列表-->
        <div v-if="!hasData">
            <van-collapse  v-for="(item,index) in list" :key="index" v-model="activeNames" accordion >
                <van-collapse-item :name="item.jobId" :title="item.jobId">
                    <template #title>
                        <div class="title1">
                            <div class="celc1">
                                <van-checkbox v-model="item.checked" shape="square" @click.stop="choose(item.checked,item.jobId)" ></van-checkbox>
                            </div>
                            <div class="col1">{{substr(item.jobName)}}</div>
                            <div class="col1">{{item.cronExpression}}</div>
                            <div class="col1">{{item.status==0? '开启':'暂停'}}</div>
                        </div>
                    </template>
                    <div class="detail">
                        <div>
                            <span>任务名称{{item.jobName}}</span>
                            <span>执行时间{{item.cronExpression}}</span>
                        </div>
                        <!--                    {{item}}-->
                    </div>
                </van-collapse-item>
            </van-collapse>
        </div>
        <van-empty v-if="hasData" description="暂未添加任务" />
<!--        分页-->
        <div v-if="!hasData" class="pagebean">
            <van-pagination
                    v-model="currentPage"
                    :total-items="totalCount"
                    :items-per-page="pageSize"
                    :show-page-size="5"
                    force-ellipses
                    @click="change"
            />
        </div>

<!--        添加任务-->
        <van-popup v-model:show="showAdd" round closeable :style="{ height: '85%',width:'95%' }">
            <div class="addbox">

                <van-form @submit="Submit">
                    <van-cell-group inset>
                        <van-field
                                v-model="taskName"
                                label="任务名称"
                                name="taskName"
                                placeholder="请输入任务名称"
                                :rules="[{ validator, message: '任务名称不可为空' }]"
                        />
                        <van-field
                                v-model="taskCron"
                                label="任务定时"
                                name="taskCron"
                                placeholder="请输入任务定时表达式"
                                :rules="[{ validator, message: '任务定时表达式不可为空' }]"
                        />
                        <van-field
                                v-model="Reqmode"
                                name="Reqmode"
                                center
                                clearable
                                readonly
                                label="请求方式"
                                placeholder="请选择请求方式"
                                :rules="[{ validator, message: '请求方式不可为空' }]"
                        >
                            <template #button>
                                <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
                                    <template #reference>
                                        <van-button type="primary" round size="small">请求方式</van-button>
                                    </template>
                                </van-popover>
                            </template>
                        </van-field>
                        <van-field
                                v-model="Requrl"
                                name="Requrl"
                                rows="2"
                                label="请求链接"
                                type="textarea"
                                placeholder="请输入请求链接"
                                :rules="[{ validator, message: '请求链接不可为空' }]"
                        />
                        <van-field
                                v-model="urlparam"
                                name="urlparam"
                                rows="2"
                                label="请求链接携带的参数"
                                type="textarea"
                                placeholder="请输入请求链接携带的参数">
                            <template #button>
                                <van-button type="primary" round size="small" @click="addurlparam">添加/修改</van-button>
                            </template>
                        </van-field>
                        <van-field
                                v-model="headerparam"
                                label="请求头(Header)"
                                name="headerparam"
                                placeholder="请输入请求头"
                        >
                            <template #button>
                                <van-button type="primary" round size="small" @click="addHeader">添加/修改</van-button>
                            </template>
                        </van-field>
                        <van-field
                                v-model="requestparam"
                                name="requestparam"
                                rows="2"
                                label="请求体"
                                type="textarea"
                                placeholder="请输入请求体"
                        >
                            <template #button>
                                <van-button type="primary" round size="small" @click="addrequestparam">添加/修改</van-button>
                            </template>
                        </van-field>
                        <van-field label="是否启用定时">
                            <template #input>
                                <van-switch v-model="isUse" size="25" />
                            </template>
                        </van-field>
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit">
                            提交
                        </van-button>
                    </div>
                </van-form>
            </div>
        </van-popup>

        <!--添加请求url参数界面-->
        <van-popup v-model:show="showurlparam" round closeable :style="{ height: '60%',width:'85%' }">
            <div class="addbox">
                <div class="paramHeaderTitle">
                    <div class="paramHeaderName">
                        参数名称
                    </div>
                    <div class="paramHeaderValue">
                        参数值
                    </div>
                </div>
                <van-form @submit="collecturlparam">
                    <van-cell-group inset>
                        <div class="addvalue" v-for="(item,index) in addurlparamList" :key="index">
                            <div class="addleftvalue">
                                <van-cell-group inset :border="true">
                                    <van-field v-model="item.urlparamLeftName" :rules="[{ validator, message: '参数名称不可为空' }]"  placeholder="请输入参数名称" />
                                </van-cell-group>
                            </div>
                            <span class="span-split">-</span>
                            <div class="addrightvalue">
                                <van-cell-group inset>
                                    <van-field v-model="item.urlparamRightValue"  placeholder="请输入参数值" />
                                </van-cell-group>
                            </div>
                            <div class="deleteBtn">
                                <van-button  round size="small" type="danger" @click="minusurlinputbox(index)" >删除</van-button>
                            </div>
                        </div>
                        <div class="addinputbox">
                            <van-button icon="plus" type="primary" @click="addurlinputbox" />
                        </div>
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit">
                            提交
                        </van-button>
                    </div>
                </van-form>
            </div>
        </van-popup>

        <!--添加请求头参数-->
        <van-popup v-model:show="showHeader" round closeable :style="{ height: '60%',width:'85%' }">
            <div class="addbox">
                <div class="paramHeaderTitle">
                    <div class="paramHeaderName">
                        参数名称
                    </div>
                    <div class="paramHeaderValue">
                        参数值
                    </div>
                </div>
                <van-form @submit="collectheaderparam">
                    <van-cell-group inset>
                        <div class="addvalue" v-for="(item,index) in addheaderparamList" :key="index">
                            <div class="addleftvalue">
                                <van-cell-group inset :border="true">
                                    <van-field v-model="item.headerparamLeftName" :rules="[{ validator, message: '参数名称不可为空' }]"  placeholder="请输入参数名称" />
                                </van-cell-group>
                            </div>
                            <span class="span-split">-</span>
                            <div class="addrightvalue">
                                <van-cell-group inset>
                                    <van-field v-model="item.headerparamRightValue"  placeholder="请输入参数值" />
                                </van-cell-group>
                            </div>
                            <div class="deleteBtn">
                                <van-button  round size="small" type="danger" @click="minusheaderinputbox(index)" >删除</van-button>
                            </div>
                        </div>
                        <div class="addinputbox">
                            <van-button icon="plus" type="primary" @click="addheaderinputbox" />
                        </div>
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit">
                            提交
                        </van-button>
                    </div>
                </van-form>
            </div>
        </van-popup>
        <!--添加请求体参数-->
        <van-popup v-model:show="showrequestparam" round closeable :style="{ height: '60%',width:'85%' }">
            <div class="addbox">
                <div class="paramHeaderTitle">
                    <div class="paramHeaderName">
                        参数名称
                    </div>
                    <div class="paramHeaderValue">
                        参数值
                    </div>
                </div>
                <van-form @submit="collectrequestparam">
                    <van-cell-group inset>
                        <div class="addvalue" v-for="(item,index) in addrequestparamList" :key="index">
                            <div class="addleftvalue">
                                <van-cell-group inset :border="true">
                                    <van-field v-model="item.requestparamLeftName" :rules="[{ validator, message: '参数名称不可为空' }]"  placeholder="请输入参数名称" />
                                </van-cell-group>
                            </div>
                            <span class="span-split">-</span>
                            <div class="addrightvalue">
                                <van-cell-group inset>
                                    <van-field v-model="item.requestparamRightValue"  placeholder="请输入参数值" />
                                </van-cell-group>
                            </div>
                            <div class="deleteBtn">
                                <van-button  round size="small" type="danger" @click="minusrequestinputbox(index)" >删除</van-button>
                            </div>
                        </div>
                        <div class="addinputbox">
                            <van-button icon="plus" type="primary" @click="addrequestinputbox" />
                        </div>
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit">
                            提交
                        </van-button>
                    </div>
                </van-form>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import { createApp } from 'vue';
    import {Search, Toast} from 'vant';
    import { ref } from 'vue';
    import { Button } from 'vant';
    import { Collapse, CollapseItem } from 'vant';
    import { Checkbox, CheckboxGroup } from 'vant';
    import { Pagination } from 'vant';
    import { Dialog } from 'vant';
    import { Empty } from 'vant';
    import { Popup } from 'vant';
    import { Switch } from 'vant';
    const app = createApp();
    app.use(Search);
    app.use(Button);
    app.use(Collapse);
    app.use(CollapseItem);
    app.use(Pagination);
    app.use(Checkbox);
    app.use(CheckboxGroup);
    app.use(Dialog);
    app.use(Empty);
    app.use(Popup);
    app.use(Switch);
    import taskConfig from '@/api/taskConfig';
    export default {
        name: "index",
        data() {
            return{
                currentPage:1,//当前页数
                pageSize:10,//每页条数
                totalCount:0,//总条数
                jobName: '',//任务名称
                list: [],//任务列表
                activeNames:'1',//当前展开项的name
                checkedAll:false,//是否全选
                checkedAllIds:[],//选中的索引id
                hasData: true,//无数据是否显示
                showDetail:false,//展示详情
                showAdd:false,//添加页面
                taskName:'',//添加任务的任务名称，作为方法参数传入 判断执行什么任务     最终提交后台用
                taskCron:'',//添加任务的任务cron定时表达式                          最终提交后台用
                isUse:true,//添加定时任务是否启用 是true 停用 false                 最终提交后台用
                //区分当前页面是新增还是修改 用于表单提交时验证当前是新增页面还是修改页面
                currentPageType: null,//0-新增 1-修改
                showPopover:false,
                actions: [
                    { text: 'Get', value: '0',icon: '/img/httppictures/Get.png'},
                    { text: 'Post', value: '1',icon: '/img/httppictures/Post.png' },
                    { text: 'Put', value: '2',icon: '/img/httppictures/Put.png' },
                    { text: 'Delete', value: '3',icon: '/img/httppictures/Delete.png' },
                ],
                Reqmode:'',//请求名称 Get Post Put Delete
                Reqvalue:'',//表单提交时的请求值 0 1 2 3  其中Get->0  Post->1  Put->2  Delete->3     最终提交后台用
                Requrl:'',//表单提交请求链接                最终提交后台用
                urlparam: '',//表单提交请求链接携带的参数    最终提交后台用
                headerparam:'',//表单提交请求头                 最终提交后台用
                requestparam: '',//表单提交请求体          最终提交后台用
                showurlparam:false,//展示输入url参数请求界面
                showHeader:false,//展示请求头界面
                showrequestparam:false,//展示请求体参数界面
                urlparamLeftName: '',//url参数请求界面左边请求名称
                urlparamRightValue: '',//url参数请求界面右边请求的值
                addurlparamList: [{'urlparamLeftName':'','urlparamRightValue':''}],//表单提交请求链接携带的参数 动态添加框的数据
                headerparamLeftName: '',//请求头参数请求界面左边请求名称
                headerparamRightValue: '',//请求头参数请求界面右边请求的值
                addheaderparamList: [{'headerparamLeftName':'','headerparamRightValue':''}],//表单提交请求链接携带的参数 动态添加框的数据
                requestparamLeftName: '',//请求体参数请求界面左边请求名称
                requestparamRightValue: '',//请求体参数请求界面右边请求的值
                addrequestparamList: [{'requestparamLeftName':'','requestparamRightValue':''}],//表单提交请求体携带的参数 动态添加框的数据
                //修改
                customJobId: 0,
            }
        },
        created() {
            this.getList();
        },
        mounted() {

        },
        methods: {
            //搜索任务
            onSearch(){
                this.getList();//系统默认（无参）
            },

            getList(){
                 taskConfig.getList({'jobName':this.jobName,'currentPage':this.currentPage,'pageSize':this.pageSize}).then(response => {
                    if (response.code === 200) {
                        this.list = response.data.list;
                        this.totalCount = response.data.count;
                        if (this.list.length === 0) {
                            // 无数据
                            this.hasData = true;
                        } else {
                            // 有数据
                            this.hasData = false;
                        }
                        //添加默认全部不选中
                        this.list.forEach(item => item.checked=false);
                    } else {
                        Toast('网络连接超时！');
                    }

                }).catch(error => {
                    console.log(error);
                });


            },

            //全选和反选
            checkAll(){
                // 先查看是否全部选中
                let jobIds = [];
                this.list.forEach(item => jobIds.push(item.jobId));
                if (this.checkedAllIds.length == 0) {
                    // 未全选，选中全部
                    this.checkedAllIds = jobIds;
                    this.list.forEach(item => item.checked = true);
                } else if (this.checkedAllIds.length < jobIds.length) {
                    //有选择，但未全部选中 则选中全部
                    this.checkedAllIds = [];
                    this.checkedAllIds = jobIds;
                    this.list.forEach(item => item.checked = true);
                } else {
                    // 全部选中 反选
                    this.checkedAllIds = [];
                    this.list.forEach(item => item.checked = false);
                }
            },

            //单选
            choose(checked,id){
                if (id === undefined) {
                    return;
                }
                if (checked) {
                    // 选中当前
                    // 添加选中元素
                    this.checkedAllIds.push(id);
                } else {
                    //未选中 删除元素
                    let newArray = [];
                    for (let item of this.checkedAllIds) {
                        if (item != id) {
                            newArray.push(item);
                        }
                    }
                    this.checkedAllIds = newArray;
                }
                // 如果全部选中 则让顶部全选改为true
                let jobIds = [];
                this.list.forEach(item => jobIds.push(item.jobId));
                if (this.checkedAllIds.length == jobIds.length) {
                    this.checkedAll = true;
                } else {
                    this.checkedAll = false;
                }
            },

            // 添加
            add() {
                this.showAdd = true;
                this.currentPageType = 0;
            },
            // 修改
            edit(){
                this.selectJobById();
                this.currentPageType = 1;
            },
            // 删除
            del() {
                let jobIds = [];
                this.list.forEach(item => jobIds.push(item.jobId));
                let isdel = this.checkedAllIds.length;
                let dels = isdel == jobIds.length ? '全部'+isdel + '项' : isdel + '项';
                if (isdel==0) {
                    Toast('请选择要删除的删除！');
                    return;
                }
                Dialog.confirm({
                    title: '确定删除',
                    message:
                        '确定删除'+dels+'？',
                }).then(() => {
                        console.log("删除了"+this.checkedAllIds)
                        let params = '';
                        this.checkedAllIds.forEach(item => params+=item+',')
                        taskConfig.delJob({"jobId":params}).then(response => {
                            if (response.code === 200) {

                                Toast('删除成功！');
                            } else {
                                Toast('网络连接超时！');
                            }

                        }).catch(error => {
                            console.log(error);
                        });
                        //选择框置空
                        this.checkedAllIds = [];
                        this.checkedAll = false;
                        // 刷新列表
                    this.$router.go(0);
                        this.getList();
                    }).catch(() => {
                    });

            },
            change(){
                this.getList();
            },
            substr(str){
                if (str.length > 6) {
                    str = str.substring(0,6)+'...'
                }
                return str
            },

            //请求方式选中修改值
            onSelect(param){
                this.Reqmode = param.text +'请求';
                this.Reqvalue = param.value;
            },


            //-----------------------url参数界面部分Start--------------------------------------
            // 打开添加url参数界面
            addurlparam(){
                this.showurlparam = true;
                //将 this.urlparam 中解析赋值到 this.addurlparamList对象中
                let urlparam;
                if (this.urlparam.substring(0, 1) == '?') {
                    urlparam = this.urlparam.substring(1);//去除前面问号
                }
                if (urlparam == undefined) {
                    return;
                }
                let spliturlparam= urlparam.split('&');//分割请求参数
                if (spliturlparam.length != 0) {
                    this.addurlparamList = [];
                    for (let url of spliturlparam) {
                        let obj = {};
                        let leftValue = url.split('=')[0];//获得等号左边的值
                        let rightValue = url.split('=')[1];//获得等号右边的值
                        obj.urlparamLeftName = leftValue;
                        obj.urlparamRightValue = rightValue;
                        if (url.indexOf('=') != -1) {
                            this.addurlparamList.push(obj);
                        }
                    }
                    this.addurlparamList.push({'urlparamLeftName': '', 'urlparamRightValue': ''});
                }
            },
            //url参数请求界面添加输入框
            addurlinputbox(){
                this.addurlparamList.push({'urlparamLeftName':'','urlparamRightValue':''});
            },
            //url参数请求界面减少输入框
            minusurlinputbox(index){
                if (this.addurlparamList.length > 0) {
                    this.addurlparamList.splice(index, 1);  //删除index为i,位置的数组元素
                }
            },
            //点击确定整理请求链接的url链接参数
            collecturlparam(){
                this.urlparam = '';
                if (this.addurlparamList.length == 1 ) {//第一次添加
                    if (this.addurlparamList[0].urlparamLeftName =='') {
                        return;
                    }
                    this.urlparam += this.addurlparamList[0].urlparamLeftName + '=' + this.addurlparamList[0].urlparamRightValue + '&';
                    this.urlparam = '?' + this.urlparam.substring(0, this.urlparam.lastIndexOf('&'));
                    this.addurlparamList = [];
                    this.showurlparam = false;
                } else { //非第一次添加
                    for (let item of this.addurlparamList) {
                        if (item.urlparamLeftName != '') {
                            this.urlparam += item.urlparamLeftName + '=' + item.urlparamRightValue + '&';
                        }
                    }
                    if (this.addurlparamList.length == 0) {//this.addurlparamList全部删除完后 拼接的?也删除
                        this.urlparam = '';
                        this.addurlparamList = [];
                        this.showurlparam = false;
                        return;
                    }
                    this.urlparam = '?' + this.urlparam.substring(0, this.urlparam.lastIndexOf('&'));
                    this.addurlparamList = [];
                    this.showurlparam = false;
                }
            },
            //-----------------------url参数界面部分Eed--------------------------------------

            //-----------------------请求头参数界面部分Start--------------------------------------
            // 打开添加请求头参数界面
            addHeader(){
                this.showHeader = true;
                //将 this.headerparam 中解析赋值到 this.addheaderparamList对象中
                let spliturlparam= this.headerparam.split('&');//分割请求参数
                if (spliturlparam.length != 0) {
                    this.addheaderparamList = [];
                    let splitheaderparam = spliturlparam.filter(item => item != '');
                    for (let url of splitheaderparam) {
                        let obj = {};
                        let leftValue = url.split('=')[0];//获得等号左边的值
                        let rightValue = url.split('=')[1];//获得等号右边的值
                        obj.headerparamLeftName = leftValue;
                        obj.headerparamRightValue = rightValue;
                        if (url.indexOf('=') != -1) {
                            this.addheaderparamList.push(obj);
                        }
                    }
                    this.addheaderparamList.push({'headerparamLeftName': '', 'headerparamRightValue': ''});
                }
            },
            //请求头参数请求界面添加输入框
            addheaderinputbox(){
                this.addheaderparamList.push({'headerparamLeftName':'','headerparamRightValue':''});
            },
            //请求头参数请求界面减少输入框
            minusheaderinputbox(index){
                if (this.addheaderparamList.length > 0) {
                    this.addheaderparamList.splice(index, 1);  //删除index为i,位置的数组元素
                }
            },
            //点击确定整理请求头
            collectheaderparam(){
                this.headerparam = '';
                if (this.addheaderparamList.length == 1 ) {//第一次添加
                    if (this.addheaderparamList[0].headerparamLeftName =='') {
                        return;
                    }
                    this.headerparam += this.addheaderparamList[0].headerparamLeftName + '=' + this.addheaderparamList[0].headerparamRightValue + '&';
                    this.headerparam = this.headerparam.substring(0, this.headerparam.lastIndexOf('&'));
                    this.addheaderparamList = [];
                    this.showHeader = false;
                } else { //非第一次添加
                    for (let item of this.addheaderparamList) {
                        if (item.headerparamLeftName != '') {
                            this.headerparam += item.headerparamLeftName + '=' + item.headerparamRightValue + '&';
                        }
                    }
                    if (this.addheaderparamList.length == 0) {//this.addheaderparamList全部删除完后 拼接的?也删除
                        this.headerparam = '';
                        this.addheaderparamList = [];
                        this.showHeader = false;
                        return;
                    }
                    this.headerparam = this.headerparam.substring(0, this.headerparam.lastIndexOf('&'));
                    this.addheaderparamList = [];
                    this.showHeader = false;
                }
            },
            //-----------------------请求头参数界面部分End--------------------------------------

            //-----------------------请求体参数界面部分Start--------------------------------------
            //打开添加请求体界面
            addrequestparam(){
                this.showrequestparam = true;
                //将 this.requestparam 中解析赋值到 this.addrequestparamList对象中
                let spliturlparam= this.requestparam.split('&');//分割请求参数
                if (spliturlparam.length != 0) {
                    this.addrequestparamList = [];
                    let splitrequestparam = spliturlparam.filter(item => item != '');
                    for (let url of splitrequestparam) {
                        let obj = {};
                        let leftValue = url.split('=')[0];//获得等号左边的值
                        let rightValue = url.split('=')[1];//获得等号右边的值
                        obj.requestparamLeftName = leftValue;
                        obj.requestparamRightValue = rightValue;
                        if (url.indexOf('=') != -1) {
                            this.addrequestparamList.push(obj);
                        }
                    }
                    this.addrequestparamList.push({'requestparamLeftName': '', 'requestparamRightValue': ''});
                }
            },
            //请求头参数请求界面添加输入框
            addrequestinputbox(){
                this.addrequestparamList.push({'requestparamLeftName':'','requestparamRightValue':''});
            },
            //请求头参数请求界面减少输入框
            minusrequestinputbox(index){
                if (this.addrequestparamList.length > 0) {
                    this.addrequestparamList.splice(index, 1);  //删除index为i,位置的数组元素
                }
            },
            //点击确定整理请求头
            collectrequestparam(){
                this.requestparam = '';
                if (this.addrequestparamList.length == 1 ) {//第一次添加
                    if (this.addrequestparamList[0].requestparamLeftName =='') {
                        return;
                    }
                    this.requestparam += this.addrequestparamList[0].requestparamLeftName + '=' + this.addrequestparamList[0].requestparamRightValue + '&';
                    this.requestparam = this.requestparam.substring(0, this.requestparam.lastIndexOf('&'));
                    this.addrequestparamList = [];
                    this.showrequestparam = false;
                } else { //非第一次添加
                    for (let item of this.addrequestparamList) {
                        if (item.requestparamLeftName != '') {
                            this.requestparam += item.requestparamLeftName + '=' + item.requestparamRightValue + '&';
                        }
                    }
                    if (this.addrequestparamList.length == 0) {//this.addrequestparamList全部删除完后 拼接的?也删除
                        this.requestparam = '';
                        this.addrequestparamList = [];
                        this.showrequestparam = false;
                        return;
                    }
                    this.requestparam = this.requestparam.substring(0, this.requestparam.lastIndexOf('&'));
                    this.addrequestparamList = [];
                    this.showrequestparam = false;
                }
            },
            //-----------------------请求体参数界面部分End--------------------------------------

            //校验表单是否为空值
            validator(val){
                if (val == '') {
                    return false;
                }
                if (val == undefined) {
                    return false;
                }
                if (val.length == 0) {
                    return false;
                }
                if (val == null) {
                    return false;
                }
                return true;
            },

            //添加/修改 任务表单提交
            Submit(){
                switch (this.currentPageType) {
                    case 0 :
                        this.addSubmit();
                        break;
                    case 1 :
                        this.editSubmit();
                        break;
                    default:
                        Toast('提交失败，请刷新页面重试!');
                        break;
                }
            },
            //添加
            addSubmit(){
                let taskName= this.taskName;//添加任务的任务名称，作为方法参数传入 判断执行什么任务
                let taskCron= this.taskCron;//添加任务的任务cron定时表达式
                let isUse = this.isUse == true ? 0 : 1;//添加定时任务是否启用 是true 停用 false
                let Reqvalue= this.Reqvalue;//表单提交时的请求值 0 1 2 3  其中Get->0  Post->1  Put->2  Delete->3
                let Requrl= this.Requrl.replace(/[\r\n]/g,"");//表单提交请求链接
                let urlparam= this.urlparam.replace(/[\r\n]/g,"");//表单提交请求链接携带的参数
                let headerparam= this.headerparam;//表单提交请求头
                let requestparam= this.requestparam.replace(/[\r\n]/g,"");//表单提交请求体
                taskConfig.addJob({
                    'jobName':taskName,
                    'cronExpression':taskCron,
                    'status':isUse,
                    'requesttype':Reqvalue,
                    'url':Requrl,
                    'urlparam':urlparam,
                    'header':headerparam,
                    'requestparam':requestparam
                }).then(response => {
                    if (response.code === 200) {
                        Toast('添加定时任务成功!');
                        this.showAdd = false;
                        this.getList();
                    } else {
                        Toast(response.data);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            //修改
            editSubmit(){
                let taskName= this.taskName;//添加任务的任务名称，作为方法参数传入 判断执行什么任务
                let taskCron= this.taskCron;//添加任务的任务cron定时表达式
                let isUse = this.isUse == true ? 0 : 1;//添加定时任务是否启用 是true 停用 false
                let Reqvalue= this.Reqvalue;//表单提交时的请求值 0 1 2 3  其中Get->0  Post->1  Put->2  Delete->3
                let Requrl= this.Requrl.replace(/[\r\n]/g,"");//表单提交请求链接
                let urlparam= this.urlparam.replace(/[\r\n]/g,"");//表单提交请求链接携带的参数
                let headerparam= this.headerparam;//表单提交请求头
                let requestparam= this.requestparam.replace(/[\r\n]/g,"");//表单提交请求体
                taskConfig.editJob({
                    'id':this.customJobId,//具体执行的请求任务id
                    'jobId':this.checkedAllIds[0],//定时任务id
                    'jobName':taskName,
                    'cronExpression':taskCron,
                    'status':isUse,
                    'requesttype':Reqvalue,
                    'url':Requrl,
                    'urlparam':urlparam,
                    'header':headerparam,
                    'requestparam':requestparam
                }).then(response => {
                    if (response.code === 200) {
                        Toast('修改定时任务成功!');
                        this.showAdd = false;
                        this.getList();
                    } else {
                        Toast(response.data);
                    }
                }).catch(error => {
                    console.log(error);
                });

            },
            //根据id查询任务
            selectJobById(){
                let customjobId = 0;
                let newJob = {};
                if (this.checkedAllIds.length == 0) {
                    Toast('请选择要修改项');
                    return;
                }
                if (this.checkedAllIds.length > 1) {
                    Toast('选择修改项过多');
                    return;
                }
                for (let job of this.list) {
                    if (job.jobId == this.checkedAllIds[0]) {
                        newJob = job;
                        customjobId = job.invokeTarget.split("'")[1]
                    }
                }
                taskConfig.selectJobById(customjobId).then(response => {
                    if (response.code === 200) {
                        let customJob = response.data;
                        this.customJobId = customJob.id;
                        this.taskName = newJob.jobName;//添加任务的任务名称，作为方法参数传入 判断执行什么任务
                        this.taskCron = newJob.cronExpression;//添加任务的任务cron定时表达式
                        this.isUse == newJob.status;//添加定时任务是否启用 是true 停用 false
                        this.Reqmode = this.actions[customJob.requesttype].text +'请求';
                        this.Reqvalue =customJob.requesttype;//表单提交时的请求值 0 1 2 3  其中Get->0  Post->1  Put->2  Delete->3
                        this.Requrl = customJob.url;//表单提交请求链接
                        this.urlparam = customJob.urlparam.substring(1);//表单提交请求链接携带的参数
                        this.headerparam = customJob.header;//表单提交请求头
                        this.requestparam = customJob.requestparam;//表单提交请求体
                        this.showAdd = true;//打开修改页面
                    } else {
                        Toast('网络连接超时！');
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
        },
/*        setup() {
            const value = ref('');
            return {
                value,
            };

        },*/

    }
</script>

<style scoped>
    .index {
        /*background-color: #FFFFFF;*/
    }
    /*搜索*/
    .topSearch {
        margin-top:10px;
    }

    /*按钮部分*/
    .addbtn {
        margin-top: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
        background-color: #FFFFFF;

        display: flex;
        border-radius: 10px;
    }
    .btn1 {
        flex:1;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .btn2 {
        flex:1;
        border-left-color: silver;
        border-right-color: silver;
    }
    .btn3 {
        flex:1;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    /*表头部分*/
    .title {
        background-color: #E5E5E5;
        margin-top: 1px;
        padding: 10px 0;
        display: flex;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    /*总选择框*/
    /*表头选择框*/
    .celc {
        flex: 0.5;
        position: relative;
        left: 4%;
    }
    .col {
        flex: 1;
        text-align: center;
    }
    .colo {
        flex: 0.5;
        text-align: left;
    }

    /*表格部分*/
    .title1 {
        display: flex;
        width: 96%;
    }
    /*表体选择框*/
    .celc1 {
        flex: 0.5;
    }
    .col1 {
        flex: 1;
        text-align: center;
    }

    .detail {
        height: 150px;
        width: auto;
    }

    /*展开箭头位置*/
    :deep(.van-cell__right-icon) {
        position: relative;
        right: 3%;
    }

    /*修改上一页下一页颜色 透明状态*/
    :deep(.van-pagination__item--disabled) {
        background-color: #FFFFFF;
        opacity:0.5;
    }
    .pagebean {
        width: auto;
        height:100px;
        margin-top: 15px;
/*        left: 5%;
        right: 5%;
        bottom: 3%;
        position:relative*/
    }
    .van-empty {
        margin: 20% auto;
    }

    .addbox {
        margin-top: 15%;
        margin-left: 5px;
        margin-right: 5px;
        width: auto;
        height: auto;
    }

    /*通用添加参数页面头部表头名称*/
    .paramHeaderTitle {
        background-color: #E5E5E5;
        margin: 1px 5px;
        padding: 10px 0;
        display: flex;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        text-align: center;
    }
    /*通用添加参数页面表头参数名称*/
    .paramHeaderName {
        border-right: 1px solid silver;
        flex: 1;
    }
    /*通用添加参数页面表头参数值*/
    .paramHeaderValue {
        border-left: 1px solid silver;
        flex: 1;
    }

    .addvalue {
        display: flex;
        border-radius: 5px;
        margin-top: 5px;
        margin-left: 5px;
        margin-right: 5px;
        border:1px solid silver;
    }
    /*通用添加参数页面左边参数值*/
    .addleftvalue {
        margin-top: 2%;
        width: 80%;
        flex: 1;
    }
    /*通用添加参数页面右边参数值*/
    .addrightvalue {
        margin-top: 2%;
        width: 80%;
        flex: 1;
    }
    /*减输入框按钮*/
    .deleteBtn {
        margin: auto 5px;
    }
    /*通用添加参数页面中间分割线*/
    .span-split {
        margin: auto;
    }
    .addinputbox {
        width: 50px;
        height: 50px;
        margin: 20px auto;
    }


</style>
